<template>
  <div ref="tableData">
    <div class="choose-column-btn">
      <el-button size="mini" type="primary" @click="choosecolumn">选择栏目</el-button>
    </div>
    <el-table
      :data="tableData"
      :show-header="false"
      size="small"
      style="width: 100%;height:90%;border:#eeeeee">
      <el-table-column
        prop="site_name"
        width="150"
        label="站点">
        <template slot-scope="scope">
          <span>{{scope.row.site_name}}/{{scope.row.navigation_name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        align="left"
        label="栏目名">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="60">
        <template slot-scope="scope">
          <el-button @click="handleDelete(scope.row)" type="text" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="栏目选择" :visible.sync="modulesVisible" width="30%" top="8vh">
      <el-row>
        <el-col :span="24">
          <div>
            <el-row :gutter="24" style="margin:0px 20px;height: 100%;">
              <el-col  :span="22" style=" min-height: 300px; max-height: 300px; overflow: scroll">
                <multistation-choose-column2 :level="0" v-bind:treedata="allList" :parentarr="emptyArr" ref="tree"></multistation-choose-column2>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="modulesVisible = false">关 闭</el-button>
        <!--<el-button type="primary"  @click="saveData">保 存</el-button>-->
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Bus from '@/utils/eventTransfer.js'
import _ from 'lodash'
import { mapGetters } from 'vuex'
import { searchColumnTree } from '@/api/systemManage/partJobManagement'
// import Bus from '@/utils/eventTransfer.js'
import MultistationChooseColumn2 from '@/components/MultistationChooseColumn2'
export default {
  name: 'multistation-choose-column',
  components: { MultistationChooseColumn2 },
  props: {
    articleId: {
      type: [String]
    },
    type: {
      type: [String]
    },
    isArtist: {
      type: [String]
    }
  },
  data() {
    return {
      laterArray: [],
      testarr: {},
      allList: [],
      loadingTree: false,
      treeColumn: [],
      treeColumnSelect: [],
      treeData: [],
      defaultPropsColumn: {
        children: 'children',
        label: 'terminalName'
      },
      tableKey: 0,
      selectItem: {
        selectId: '',
        selectOuinfoId: '',
        selectOuinfoName: ''
      },
      modulesVisible: false,
      tableData: [],
      selectedItemIdArr: [],
      selectedItemIdMax: 'flag',
      flag: false,
      exceptSelectedArr: [],
      flagSelectedArr: [],
      noflagSelectedArr: [],
      auditarr: []
    }
  },
  computed: {
    ...mapGetters(['userid']),
    emptyArr: function() {
      // `this` 指向 vm 实例
      return this.tableData.forEach(item => {
        return (
          item.systemid +
          ';' +
          item.systemname +
          item.systemid +
          ';' +
          item.systemname
        )
      })
    }
  },
  created() {
    this.loading = true
    const id = {
      articleId: this.articleId,
      userId: this.userid,
      isArtist: this.isArtist,
      type: this.type
    }
    searchColumnTree(id).then(response => {
      if (response.data.data.checkList.length !== 0) {
        response.data.data.checkList.forEach(item => {
          this.selectedItemIdArr.push(item.audit_type)
        })
        // 等到选中栏目里的最大值
        // this.selectedItemIdMax = parseInt(this.selectedItemIdArr[0])
        // if (this.selectedItemIdArr.length > 0) {
        //   for (var i = 1; i < this.selectedItemIdArr.length; i++) {
        //     if (parseInt(this.selectedItemIdArr[i]) > this.selectedItemIdMax) {
        //       this.selectedItemIdMax = parseInt(this.selectedItemIdArr[i])
        //     }
        //   }
        // }
      }
      let data = response.data.data.allList

      // let that = this.testarr
      for (var i = 0; i < data.length; i++) {
        var temp = data[i]
        temp.show = true
        function treeData(arr) {
          if (arr.children != null) {
            for (var j = 0; j < arr.children.length; j++) {
              arr.children[j].show = true
              treeData(arr.children[j])
            }
          }
        }
        treeData(temp)
      }
      this.allList = data
      // 默认给个组织机构ID
      this.loading = false
    })
    // 点击的数据父级的audit_type
    // var auditarr = []
    Bus.$on('testhaha', data => {
      var auditdata = ''
      // 找到点击的最上层
      auditdata = this.allList.find(item => {
        return item.id === data.parent.split(';')[0].split('/')[1]
      })
      // bobo ----------2018/11/05 开始
      if (JSON.stringify(this.selectedItemIdArr) !== '[]') {
        console.log('我不是空数组进来了：')
        if (data.checked == true) {
          this.selectedItemIdArr.push(auditdata.audit_type)
          console.log('我是不相等切选中之后的数组')
          // console.log(this.selectedItemIdArr)
        } else {
          Array.prototype.indexOf = function(val) {
            for (var i = 0; i < this.length; i++) {
              if (this[i] == val) return i
            }
            return -1
          }
          Array.prototype.remove = function(val) {
            var index = this.indexOf(val)
            if (index > -1) {
              this.splice(index, 1)
            }
          }
          console.log('我是取消选中之后的数组：')
          console.log(this.selectedItemIdArr)
          this.selectedItemIdArr.remove(auditdata.audit_type)
          console.log('我是取消选中之后的删除后的数组：')
          console.log(this.selectedItemIdArr)
        }
        var max = parseInt(this.selectedItemIdArr[0])
        // 等到选中栏目里的最大值
        if (this.selectedItemIdArr.length > 0) {
          for (var i = 1; i < this.selectedItemIdArr.length; i++) {
            var current1 = parseInt(this.selectedItemIdArr[i])
            if (current1 >= max) {
              max = current1
            }
          }
        }
      } else {
        console.log('我是空数组进来了：')
        // 判断是否选中这个列表
        if (data.checked == true) {
          this.auditarr.push(auditdata.audit_type)
          console.log(this.auditarr)
        } else {
          Array.prototype.indexOf = function(val) {
            for (var i = 0; i < this.length; i++) {
              if (this[i] == val) return i
            }
            return -1
          }
          Array.prototype.remove = function(val) {
            var index = this.indexOf(val)
            if (index > -1) {
              this.splice(index, 1)
            }
          }
          console.log('我是kongshuz取消选中之后的数组：')
          console.log(this.auditarr)
          this.auditarr.remove(auditdata.audit_type)
          console.log('我是kongshuzu取消选中之后的删除后的数组：')
          console.log(this.auditarr)
        }
        // 等到选中栏目里的最大值
        var max = parseInt(this.auditarr[0])
        if (this.auditarr.length > 0) {
          for (var i = 1; i < this.auditarr.length; i++) {
            var cur = parseInt(this.auditarr[i])
            if (cur > max) {
              max = cur
            }
          }
        }
      }
      // bobo --------- 2018/11/05 结束
      // 把max传给父组件
      // this.$emit('headCallBack', {
      //   max: max,
      //   arr: this.tableData
      // })
      // console.log('lalalal')
      // console.log(auditarr)
      // console.log(max)
      // console.log('lalalal')

      this.laterArray = []
      if (data.checked) {
        this.testarr[data.id] = data.parent + '/' + data.id + ';' + data.name
      } else {
        delete this.testarr[data.id]
      }
      var arrays = []
      for (let i in this.testarr) {
        arrays.push(this.testarr[i].substring(10, this.testarr[i].length))
      }
      var later = []
      arrays.forEach(function(item, index) {
        let itemValue = item.split('/')
        var demo = {}
        itemValue.forEach(function(i, d) {
          let id = i.split(';')
          if (d === 0) {
            demo.site_id = id[0]
            demo.site_name = id[1]
          } else if (d === 1) {
            demo.navigation_id = id[0]
            demo.navigation_name = id[1]
          } else if (d === 2) {
            demo.id = id[0]
            demo.name = id[1]
          } else if (d === 3) {
            demo.id = demo.id + '/' + id[0]
            demo.name = demo.name + '/' + id[1]
          } else if (d === 4) {
            demo.id = demo.id + '/' + id[0]
            demo.name = demo.name + '/' + id[1]
          }
        })
        later.push(demo)
      })
      this.tableData = later
      // console.log(2222222333222222222)
      // console.log(this.tableData)
      // let arrListM = []
      // this.allList.forEach(item => {
      //   this.tableData.forEach(item2 => {
      //     if (item.id === item2.site_id) {
      //       arrListM.push(item.audit_type)
      //     }
      //   })
      // })
      this.$emit('headCallBack', {
        max: max
      })
    })
  },
  methods: {
    handleDelete(row) {
      this.tableData.splice(this.tableData.indexOf(row), 1)
      delete this.testarr[row.id]
      // 递归找到对应的id,把checked状态置成false
      this.deleteTreeChecked(row.id, this.allList)
      // console.log(111111)
      // console.log(this.allList)
      // let delItem = this.allList.find(item => {
      //   return item.id === row.site_id
      // })
      let handleDelMaxListId = []
      this.allList.forEach(item => {
        this.tableData.forEach(item2 => {
          if (item.id === item2.site_id) {
            handleDelMaxListId.push(item.audit_type)
          }
        })
      })
      console.log(5555555555)
      // console.log(handleDelMaxListId)
      var maxItemDel = parseInt(handleDelMaxListId[0])
      if (handleDelMaxListId.length > 0) {
        for (var i = 1; i < handleDelMaxListId.length; i++) {
          var curItem = parseInt(handleDelMaxListId[i])
          if (curItem > maxItemDel) {
            maxItemDel = curItem
          }
        }
      }
      if (isNaN(maxItemDel)) {
        maxItemDel = ''
      }
      // console.log(maxItemDel)
      console.log(5555555555555)
      this.selectedItemIdArr = handleDelMaxListId
      this.auditarr = handleDelMaxListId
      // console.log(this.selectedItemIdArr)
      this.$emit('handleDelList', maxItemDel)
    },
    deleteTreeChecked(id, item) {
      if (item) {
        for (var i = 0; i < item.length; i++) {
          if (id === item[i].id && item[i].isChecked === true) {
            item[i].isChecked = false
            return
          }
          if (item[i].children && item[i].children.length > 0) {
            this.deleteTreeChecked(id, item[i].children)
          }
        }
      }
    },
    saveData() {
      this.modulesVisible = false
      this.tableData = _.cloneDeep(this.laterArray)
    },
    choosecolumn() {
      this.modulesVisible = true
      this.emptyArr = ''
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.el-button--mini,
.el-button--mini.is-round {
  padding: 3px 5px;
}

.list-content {
  padding: 0px;
  border: 1px #ddd solid;
  border-bottom: none;
}

.list-item {
  padding: 10px 8px;
  border-bottom: 1px #ddd solid;
  cursor: pointer;
}

.list-item .list-option {
  margin-left: 100px;
  text-align: right;
}

.list-item.active {
  background-color: ghostwhite;
}
.p-l {
  float: right;
}

.choose-column-btn {
  float: right;
  margin-bottom: 10px;
}
</style>
